<template>
	<view class="Carousel">
		<swiper ref="swiper" :autoplay="true" :loop="true" current="{{currentSwiper}}" @change="swiperChange" slideshow>
			<swiper-item v-for="(item, index) in imageList" :key="item.id">
				<image :src="item.url" style="width:100%;height:220px;"></image>
			</swiper-item>
		</swiper>
		<view class='bannerNum'>{{(currentSwiper+1)}}/{{imageList.length}}</view>
	</view>
	<view class="introduce"><!-- 头部介绍 -->
		<text class="introduce_one">{{ item.spotName}}</text>
		<view class="price">
			售价 <text>￥</text>{{ item.showPrice }}<text>元/人</text>
		</view>
		<view class="explain">
			<text>说明： 价格包含行程内景点、空调旅游车、旅行社责任险、导游
				服务、不含餐费、不含自费景点</text>
		</view>
	</view>
	
	
	<view class="nav"><!-- 功能导航栏 -->
		<text @click="switchComponent('introduce');switchTab(0)" class="nav-item"
			:class="{'active':activeTab===0}">景点介绍</text>
		<text @click="switchComponent('arrange');switchTab(1)" class="nav-item"
			:class="{'active':activeTab===1}">行程安排</text>
		<text @click="switchComponent('price');switchTab(2)" class="nav-item"
			:class="{'active':activeTab===2}">自费景点</text>
	</view>
	<arrange v-if="currentComponent==='arrange'"></arrange>
	<introduce v-if="currentComponent==='introduce'"></introduce>
	<price v-if="currentComponent==='price'"></price>
</template>
<script>
	import {mapState} from 'vuex'
	import {
		ref
	} from 'vue'
	import arrange from './arrange.vue'
	import introduce from "./introduce.vue"
	import price from "./price.vue"
	import {http} from '../../../utils/http.js'
	export default {
		  onLoad(query) {
		    // query 中包含传递过来的参数
		    const id = query.id;
			console.log(id);
		    
		    // 根据 id 去请求数据，这里可以使用 uni.request 等方法请求数据
		    this.fetchData(id);
		  },
		components: {
			arrange,
			introduce,
			price
		},
		computed:{
			...mapState(['id','state2']),
		},
		// mounted() {
		// 	this.fetchProductList(); // 页面加载时调用获取商品列表的方法
		// },
		setup() {
			const currentComponent = ref('introduce')
			const switchComponent = (component) => {
				currentComponent.value = component
			}
			return {
				currentComponent,
				switchComponent
			}
		},
		data() {
			return {
				item: {}, // 存放从后端拿的数据数据
				activeTab: 0,
				imageList: [{
						id: '1',
						url: '/static/images/swiper01.png'
					},
					{
						id: '2',
						url: '/static/images/swiper01.png'
					},
					// 其他图片...
				],
				currentSwiper: 0

			}
		},
		
		methods: {
			 fetchData(id) {
			      // 根据 id 请求数据的逻辑
			      // 这里演示一个简单的示例，实际中应根据实际接口文档进行调整
			      uni.request({
			        url: `/api/common/listScenicById/${id}`, // 替换成实际接口地址
					method:'GET',
			        data: {
			          id: id
			        },
			        success: (res) => {
			          this.item = res.data.data[0]
					  console.log(this.item)
			        },
			        fail: (err) => {
			          console.error('请求数据失败', err);
			        }
			      });
			    },
			
			switchTab(index) {
				this.activeTab = index; // 切换选中项
			},
			swiperChange: function(e) {
				this.currentSwiper = e.detail.current
			},
		}
	}
</script>

<style>
	.Carousel {
		display: flexbox;
		position: relative;
	}
	.bannerNum {
		display: flexbox;
		width: 110rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		position: absolute;
		right: 15rpx;
		bottom: 30rpx;
		background-color: rgba(248, 248, 255, 0.5);
		border-radius: 100px;
		color: #fff;
		font-size: 30rpx;
	}

	.introduce {
		/* border: 1px solid red; */
		display: flexbox;
		border-radius: 10px 10px 0 0;
		margin-top: -10px;
		position: relative;
		background-color: white;
		padding-top: 10px;
	}

	.introduce_one {
		font-weight: bold;
	}

	.content {
		padding-top: 10px;
	}

	.price {
		color: red;
		padding: 10px 0 10px 0;
		font-weight: bold;
	}

	.price text {
		font-size: 10px;
	}

	.explain {
		border-top: 1px solid #ebebeb;
		border-bottom: 1px solid #ebebeb;
		padding: 10px;
		font-size: 10px;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #ccc;
	}

	.nav-item {
		padding: 10px;
		color: #666;
		/* 默认字体颜色 */
	}

	.nav-item.active {
		color: #1e90ff;
		/* 点击后的字体颜色 */
		border-bottom: 2px solid #1e90ff;
		/* 点击后的下边框 */
	}

	.nav text {
		float: left;
		margin-left: 20px;
		list-style-type: none;
		font-weight: bold;
		border-bottom: 2px solid transparent;
	}
</style>